$bgColor: #fff;
$textColor: rgba(#000, 0.86);
$fadeColor: rgba(#000, 0.6);
$darkColor: rgba(#000, 0.98);
$highlightColor: #bd6262;
$mainWidth: 860px;
$mainWidth-narrow: 760px;
$mainWidth-wide: 1024px;
$mainWidth-wider: 100%;
$borderColor: rgba(#000, 0.05);

/*****/
$td-bgColor: #1a1a1a;
$td-bgColor-light: #222;
$td-bgColor-dark: #111;
$td-textColor: #b0b0b0;
$td-textColor-light: #cececf;
$td-textColor-dark: #aaa;
$td-borderColor: rgba(#fff, 0.05);

/****/
$headerBgColor: rgba(#000, 0.95);
$headerBgColor-light: rgba(#000, 0.8);
$headerBgColor-blur: rgba(#000, 0.15);
$headerTextColor: #dfdfdf;
$headerTextColor-highlight: #fff;

/****/
$floatDistance: 18px;

$animationTime-very-slow: 0.5s;
$animationTime-slow: 0.35s;
$animationTime: 0.2s;
$animationTime-fast: 0.1s;
$animationTimingFunc: cubic-bezier(.25,.46,.45,.94);

$void-font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei',
                    'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, -apple-system, system-ui, sans-serif;
$void-font-default: 'Open Sans', $void-font-sans;
$void-font-serif: 'Noto Serif SC', $void-font-sans;
@font-face {
    font-family: "Monoton";
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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IABBAGwAbAAgAHIAaQBnAGgAdABzACAAcgBlAHMAZQByAHYAZQBkAC4ATQBvAG4AbwB0AG8AbgBSAGUAZwB1AGwAYQByAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAATQBvAG4AbwB0AG8AbgAgADoAIAAxADkALQA4AC0AMgAwADEAMQBNAG8AbgBvAHQAbwBuAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwADAATQBvAG4AbwB0AG8AbgAtAFIAZQBnAHUAbABhAHIATQBvAG4AbwB0AG8AbgAgAGkAcwAgAGEAIAB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAHYAZQByAG4AbwBuACAAYQBkAGEAbQBzAC4AdgBlAHIAbgBvAG4AIABhAGQAYQBtAHMAQwBvAHAAeQByAGkAZwBoAHQAIAAoAGMAKQAgADIAMAAxADEAIABiAHkAIAB2AGUAcgBuAG8AbgAgAGEAZABhAG0AcwAuACAAQQBsAGwAIAByAGkAZwBoAHQAcwAgAHIAZQBzAGUAcgB2AGUAZAAuAAACAAAAAAAA/7UAMgAAAAAAAAAAAAAAAAAAAAAAAAADAAMAAAATABc=) format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    font-style: normal;
}

@mixin bg {
    background: {
        size: cover;
        repeat: no-repeat;
        position: center;
    }
}

@mixin sidebar {
    color: $td-textColor;
    background: $td-bgColor-dark;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        right: 0;
    }
    100% {
        opacity: 1;
        right: 20px;
    }
}

@keyframes fade-out{
    0%{
        right: 20px;
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        right: 20px;
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes float-down {
    0% {
        opacity: 0;
        transform: translateY(-$floatDistance);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float-up {
    0% {
        opacity: 0;
        transform: translateY($floatDistance);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes switch {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}